<template>
  <div class="stock-list">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>库存管理</h2>
      <p>管理系统中的所有商品库存信息</p>
    </div>
    
    <div class="content-wrapper">
      <!-- 搜索和操作栏 -->
      <div class="search-action-bar">
        <div class="search-box">
          <input 
            type="text" 
            placeholder="搜索商品名称、编号..." 
            v-model="searchQuery"
            @keyup.enter="searchStocks"
            class="search-input"
          >
          <button class="search-btn" @click="searchStocks">🔍</button>
        </div>
        
        <div class="filter-controls">
          <select v-model="statusFilter" class="filter-select">
            <option value="">全部状态</option>
            <option value="in-stock">有库存</option>
            <option value="low-stock">库存不足</option>
            <option value="out-of-stock">缺货</option>
          </select>
        </div>
        
        <button class="btn btn-primary create-btn" @click="showAddModal">
          <i class="icon">➕</i>
          添加库存
        </button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载库存数据...</p>
      </div>
      
      <!-- 空状态 -->
      <div v-else-if="filteredStocks.length === 0" class="empty-state">
        <div class="empty-icon">📦</div>
        <h3>暂无库存数据</h3>
        <p>{{ searchQuery || statusFilter ? '没有找到匹配的库存记录' : '还没有添加任何库存记录' }}</p>
        <button class="btn btn-primary" @click="showAddModal" v-if="!searchQuery && !statusFilter">
          添加第一个库存记录
        </button>
      </div>
      
      <!-- 库存网格 -->
      <div v-else class="stocks-grid">
        <div 
          class="stock-card" 
          v-for="stock in paginatedStocks" 
          :key="stock.stockId"
          :class="{ 
            'low-stock': stock.stockQuantity < 10 && stock.stockQuantity > 0,
            'out-of-stock': stock.stockQuantity === 0 
          }"
        >
          <div class="card-content">
            <div class="stock-info">
              <h3 class="stock-title">{{ stock.shoe ? stock.shoe.name : '未知商品' }}</h3>
              <div class="stock-meta">
                <span class="stock-id">ID: {{ stock.stockId }}</span>
                <span class="stock-size">尺码: {{ stock.size ? stock.size.shoeSize : '未知尺码' }}</span>
              </div>
            </div>
            
            <div class="stock-details">
              <div class="detail-row">
                <span class="label">商品编号:</span>
                <span class="value">{{ stock.shoe ? stock.shoe.serialNumber : stock.shoeId }}</span>
              </div>
              <div class="detail-row">
                <span class="label">库存数量:</span>
                <span class="value" :class="{
                  'quantity-normal': stock.stockQuantity >= 10,
                  'quantity-low': stock.stockQuantity < 10 && stock.stockQuantity > 0,
                  'quantity-out': stock.stockQuantity === 0
                }">
                  {{ stock.stockQuantity }}
                </span>
              </div>
              <div class="detail-row">
                <span class="label">状态:</span>
                <span class="value" :class="{
                  'status-normal': stock.stockQuantity >= 10,
                  'status-low': stock.stockQuantity < 10 && stock.stockQuantity > 0,
                  'status-out': stock.stockQuantity === 0
                }">
                  {{ getStockStatus(stock.stockQuantity) }}
                </span>
              </div>
            </div>
            
            <div class="card-actions">
              <button class="action-btn edit" @click="editStock(stock)" title="编辑">✏️</button>
              <button class="action-btn delete" @click="deleteStock(stock)" title="删除">🗑️</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页组件 -->
      <div v-if="filteredStocks.length > 0" class="pagination-wrapper">
        <div class="pagination-info">
          显示第 {{ (currentPage - 1) * pageSize + 1 }} - 
          {{ Math.min(currentPage * pageSize, filteredStocks.length) }} 条，
          共 {{ filteredStocks.length }} 条记录
        </div>
        
        <div class="pagination-controls">
          <button 
            class="pagination-btn" 
            @click="currentPage = currentPage - 1"
            :disabled="currentPage <= 1"
          >
            上一页
          </button>
          
          <div class="page-numbers">
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="currentPage = page"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="pagination-btn" 
            @click="currentPage = currentPage + 1"
            :disabled="currentPage >= totalPages"
          >
            下一页
          </button>
        </div>
      </div>
      
      <!-- 添加/编辑模态框 -->
      <div class="modal-overlay" v-if="showModal" @click="closeModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ editingStock ? '编辑库存' : '添加库存' }}</h3>
            <button class="close-btn" @click="closeModal">✕</button>
          </div>
          
          <div class="modal-body">
            <form @submit.prevent="submitStock">
              <div class="form-group">
                <label>选择商品 *</label>
                <select v-model="currentStock.shoeId" required class="form-input">
                  <option value="">请选择商品</option>
                  <option v-for="shoe in shoes" :key="shoe.shoeId" :value="shoe.shoeId">
                    {{ shoe.name }} ({{ shoe.serialNumber }})
                  </option>
                </select>
              </div>
              
              <div class="form-group">
                <label>选择尺码 *</label>
                <select v-model="currentStock.sizeId" required class="form-input">
                  <option value="">请选择尺码</option>
                  <option v-for="size in sizes" :key="size.sizeId" :value="size.sizeId">
                    {{ size.shoeSize }}
                  </option>
                </select>
              </div>
              
              <div class="form-group">
                <label>库存数量 *</label>
                <input 
                  type="number" 
                  v-model.number="currentStock.stockQuantity" 
                  required 
                  min="0"
                  class="form-input"
                  placeholder="请输入库存数量"
                >
              </div>
            </form>
          </div>
          
          <div class="form-actions">
            <button type="button" class="btn-secondary" @click="closeModal">取消</button>
            <button type="button" class="btn-primary" @click="submitStock">
              {{ editingStock ? '更新' : '添加' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockManagement',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      loading: false,
      showModal: false,
      editingStock: null,
      currentPage: 1,
      pageSize: 12,
      currentStock: {
        stockId: null,
        shoeId: '',
        sizeId: '',
        stockQuantity: 0
      },
      stocks: [],
      shoes: [],
      sizes: []
    }
  },
  computed: {
    filteredStocks() {
      let filtered = this.stocks
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(stock => {
          const shoeName = stock.shoe ? stock.shoe.name.toLowerCase() : ''
          const serialNumber = stock.shoe ? stock.shoe.serialNumber.toLowerCase() : ''
          const shoeSize = stock.size ? stock.size.shoeSize : ''
          
          return shoeName.includes(query) ||
                 serialNumber.includes(query) ||
                 shoeSize.includes(query) ||
                 stock.shoeId.toString().includes(query) ||
                 stock.stockId.toString().includes(query)
        })
      }
      
      // 状态过滤
      if (this.statusFilter) {
        filtered = filtered.filter(stock => {
          switch (this.statusFilter) {
            case 'in-stock':
              return stock.stockQuantity >= 10
            case 'low-stock':
              return stock.stockQuantity < 10 && stock.stockQuantity > 0
            case 'out-of-stock':
              return stock.stockQuantity === 0
            default:
              return true
          }
        })
      }
      
      return filtered
    },
    totalPages() {
      return Math.ceil(this.filteredStocks.length / this.pageSize)
    },
    paginatedStocks() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredStocks.slice(start, end)
    },
    visiblePages() {
      const pages = []
      const total = this.totalPages
      const current = this.currentPage
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        } else if (current >= total - 3) {
          pages.push(1)
          pages.push('...')
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          pages.push(1)
          pages.push('...')
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        }
      }
      
      return pages
    }
  },
  methods: {
    searchStocks() {
      this.currentPage = 1
    },
    showAddModal() {
      this.editingStock = null
      this.currentStock = {
        stockId: null,
        shoeId: '',
        sizeId: '',
        stockQuantity: 0
      }
      this.showModal = true
    },
    editStock(stock) {
      this.editingStock = stock
      this.currentStock = {
        stockId: stock.stockId,
        shoeId: stock.shoeId,
        sizeId: stock.sizeId,
        stockQuantity: stock.stockQuantity
      }
      this.showModal = true
    },
    async submitStock() {
      try {
        // 验证表单
        if (!this.currentStock.shoeId || !this.currentStock.sizeId || this.currentStock.stockQuantity < 0) {
          this.showToast('请填写完整的库存信息', 'error')
          return
        }
        
        // 检查是否已存在相同商品和尺码的库存记录
        const existingStock = this.stocks.find(stock => 
          stock.shoeId === this.currentStock.shoeId && 
          stock.sizeId === this.currentStock.sizeId &&
          (!this.editingStock || stock.stockId !== this.editingStock.stockId)
        )
        
        if (existingStock) {
          this.showToast('该商品的此尺码已存在库存记录', 'error')
          return
        }
        
        if (this.editingStock) {
          await this.updateStock()
        } else {
          await this.createStock()
        }
        
        this.closeModal()
        this.showToast(this.editingStock ? '库存更新成功！' : '库存添加成功！', 'success')
      } catch (error) {
        this.showToast('操作失败：' + error.message, 'error')
      }
    },
    // API调用方法
    async loadStocks() {
      try {
        const response = await fetch('http://localhost:8080/api/v1/stock/list')
        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            this.stocks = result.data || []
          } else {
            console.error('Failed to load stocks:', result.message)
            this.showToast('加载库存数据失败: ' + result.message, 'error')
          }
        } else {
          console.error('Failed to load stocks:', response.statusText)
          this.showToast('加载库存数据失败', 'error')
        }
      } catch (error) {
        console.error('Error loading stocks:', error)
        this.showToast('网络错误，请稍后重试', 'error')
      }
    },

    async loadShoes() {
      try {
        const response = await fetch('http://localhost:8080/api/v1/shoes/list')
        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            this.shoes = result.data || []
          } else {
            console.error('Failed to load shoes:', result.message)
            this.showToast('加载商品数据失败: ' + result.message, 'error')
          }
        } else {
          console.error('Failed to load shoes:', response.statusText)
          this.showToast('加载商品数据失败', 'error')
        }
      } catch (error) {
        console.error('Error loading shoes:', error)
        this.showToast('网络错误，请稍后重试', 'error')
      }
    },

    async loadSizes() {
      try {
        const response = await fetch('http://localhost:8080/api/v1/sizes/list')
        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            this.sizes = result.data || []
          } else {
            console.error('Failed to load sizes:', result.message)
            this.showToast('加载尺码数据失败: ' + result.message, 'error')
          }
        } else {
          console.error('Failed to load sizes:', response.statusText)
          this.showToast('加载尺码数据失败', 'error')
        }
      } catch (error) {
        console.error('Error loading sizes:', error)
        this.showToast('网络错误，请稍后重试', 'error')
      }
    },

    async createStock() {
      const response = await fetch('http://localhost:8080/api/v1/stock/add', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          shoeId: this.currentStock.shoeId,
          sizeId: this.currentStock.sizeId,
          stockQuantity: this.currentStock.stockQuantity
        })
      })
      
      const result = await response.json()
      if (result.code === 200) {
        await this.loadStocks() // 重新加载数据
      } else {
        throw new Error(result.message || '添加失败')
      }
    },
    async updateStock() {
      const response = await fetch('http://localhost:8080/api/v1/stock/update', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          shoeId: this.currentStock.shoeId,
          sizeId: this.currentStock.sizeId,
          stockQuantity: this.currentStock.stockQuantity
        })
      })
      
      const result = await response.json()
      if (result.code === 200) {
        await this.loadStocks() // 重新加载数据
      } else {
        throw new Error(result.message || '更新失败')
      }
    },
    async deleteStock(stock) {
       const shoeName = stock.shoe ? stock.shoe.name : '未知商品'
       const shoeSize = stock.size ? stock.size.shoeSize : '未知尺码'
       if (confirm(`确定要删除商品"${shoeName}"尺码${shoeSize}的库存记录吗？`)) {
        try {
          const response = await fetch(`http://localhost:8080/api/v1/stock/delete/${stock.shoeId}/${stock.sizeId}`, {
            method: 'POST'
          })
          
          const result = await response.json()
          if (result.code === 200) {
            await this.loadStocks() // 重新加载数据
            this.showToast('库存删除成功！', 'success')
            
            // 如果当前页没有数据了，回到上一页
            if (this.paginatedStocks.length === 0 && this.currentPage > 1) {
              this.currentPage--
            }
          } else {
            throw new Error(result.message || '删除失败')
          }
        } catch (error) {
          this.showToast('删除失败：' + error.message, 'error')
        }
      }
    },
    closeModal() {
      this.showModal = false
      this.editingStock = null
      this.currentStock = {
        shoeId: '',
        sizeId: '',
        stockQuantity: 0
      }
    },
    getStockStatus(quantity) {
      if (quantity === 0) return '缺货'
      if (quantity < 10) return '库存不足'
      return '库存充足'
    },
    showToast(message, type = 'info') {
      const toast = document.createElement('div')
      toast.textContent = message
      
      Object.assign(toast.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        padding: '12px 24px',
        borderRadius: '8px',
        color: 'white',
        fontSize: '14px',
        fontWeight: '500',
        zIndex: '10000',
        opacity: '0',
        transition: 'all 0.3s ease',
        transform: 'translateY(-20px)'
      })
      
      // 根据类型设置背景色
      const colors = {
        success: 'linear-gradient(135deg, #10b981, #059669)',
        error: 'linear-gradient(135deg, #ef4444, #dc2626)',
        warning: 'linear-gradient(135deg, #f59e0b, #d97706)',
        info: 'linear-gradient(135deg, #3b82f6, #2563eb)'
      }
      toast.style.background = colors[type] || colors.info
      
      document.body.appendChild(toast)
      
      // 显示动画
      setTimeout(() => {
        toast.style.opacity = '1'
        toast.style.transform = 'translateY(0)'
      }, 100)
      
      // 自动消失
      setTimeout(() => {
        toast.style.opacity = '0'
        toast.style.transform = 'translateY(-20px)'
        setTimeout(() => {
          if (document.body.contains(toast)) {
            document.body.removeChild(toast)
          }
        }, 300)
      }, 3000)
    }
  },
  watch: {
    statusFilter() {
      this.currentPage = 1
    }
  },
  
  async mounted() {
    this.loading = true
    try {
      await Promise.all([
        this.loadStocks(),
        this.loadShoes(),
        this.loadSizes()
      ])
    } catch (error) {
      console.error('Failed to load initial data:', error)
      this.showToast('加载数据失败，请刷新页面重试', 'error')
    } finally {
      this.loading = false
    }
  }
}
</script>

<style scoped>
/* 主容器样式 */
.stock-list {
  padding: 0;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.page-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.page-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 1.1rem;
}

/* 内容包装器 */
.content-wrapper {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
}

/* 搜索和操作栏 */
.search-action-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 过滤控件 */
.filter-controls {
  display: flex;
  gap: 1rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  background: white;
  transition: all 0.3s ease;
  min-width: 150px;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 创建按钮 */
.create-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #64748b;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #64748b;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
}

.empty-state p {
  margin: 0 0 24px 0;
  font-size: 16px;
}

/* 库存网格 */
.stocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 24px;
}

/* 库存卡片 */
.stock-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  
  transition: all 0.3s ease;
  position: relative;
}

.stock-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.stock-card.low-stock {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.stock-card.out-of-stock {
  border-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.card-content {
  padding: 20px;
}

/* 库存信息 */
.stock-info {
  margin-bottom: 16px;
}

.stock-title {
  margin: 0 0 8px 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.stock-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stock-id,
.stock-size {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

/* 库存详情 */
.stock-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.detail-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.value {
  font-size: 14px;
  color: #1e293b;
  font-weight: 600;
}

.quantity-normal {
  color: #059669;
}

.quantity-low {
  color: #f59e0b;
}

.quantity-out {
  color: #ef4444;
}

.status-normal {
  color: #059669;
  background: #dcfce7;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.status-low {
  color: #f59e0b;
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.status-out {
  color: #ef4444;
  background: #fee2e2;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* 卡片操作 */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.edit {
  background: #dbeafe;
  color: #1d4ed8;
}

.action-btn.edit:hover {
  background: #3b82f6;
  color: white;
  transform: scale(1.1);
}

.action-btn.delete {
  background: #fee2e2;
  color: #dc2626;
}

.action-btn.delete:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* 分页组件 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  color: #64748b;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-number:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.page-number.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
  padding: 24px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #64748b;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-actions {
  padding: 0 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-secondary {
  padding: 12px 24px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: #e2e8f0;
}

.btn-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stock-list {
    padding: 16px;
  }
  
  .search-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .stocks-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  
  .pagination-wrapper {
    flex-direction: column;
    text-align: center;
  }
  
  .modal-content {
    margin: 20px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .page-header h2 {
    font-size: 24px;
  }
  
  .stock-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>